<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="140px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="付款方类型："
          style="width: 50%"
        >
          <div>{{ getLabel('returned_money_type', datas?.customerType) }}</div>
        </el-form-item>
        <el-form-item
          label="付款方名称："
          style="width: 50%"
        >
          <div>{{ datas?.customerName }}</div>
        </el-form-item>
        <el-form-item
          label="金额："
          style="width: 50%"
        >
          <div class="flow-status-color">{{ moneyFormat(datas?.receiveAmount) }}元</div>
        </el-form-item>
        <el-form-item
          label="付款开户行："
          style="width: 50%"
        >
          <div>{{ datas?.bankName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="付款银行账号："
          style="width: 50%"
        >
          <div>{{ datas?.bankNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="付款日期："
          style="width: 50%"
        >
          <div v-if="datas?.payTime">{{ dateFormat('yyyy-mm-dd', datas?.payTime) }}</div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="负责营销职员："
          style="width: 50%"
        >
          <div>{{ datas?.headName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="款项描述："
          style="width: 100%"
        >
          <div>{{ datas?.remark || '无' }}</div>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { inject, reactive, toRefs, watch } from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
    id: {
      type: Number,
      default: () => {},
    },
    refresh: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const api = inject('api')
    var detail = reactive({
      datas: props.detailData,
    })
    const getPayeeDetail = (id) => {
      api.returnedAndReceivable.RETURNEDMONEY_DETAIL({ id: id }).then((res) => {
        if (res.code === 0) {
          detail.datas = res.data.data
        }
      })
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          detail.datas = newval
        }
      },
      { immediate: true }
    )
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          console.log(newval)
          getPayeeDetail(newval)
        }
      },
      { immediate: true }
    )
    watch(
      () => props.refresh,
      (newval, oldval) => {
        if (newval) {
          getPayeeDetail(props.id)
          context.emit('update:refresh', false)
        }
      },
      { immediate: false }
    )
    return {
      ...toRefs(detail),
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
